<template>
  <div class="filters">
    <el-row
      type="flex"
      class="filters-top"
      justify="space-between"
      align="middle"
    >
      <el-col :span="8">
        单程： {{ data.info.departCity }} - {{ data.info.destCity }} /
        {{ data.info.departDate }}
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airport"
          placeholder="起飞机场"
          @change="runFilters"
        >
          <el-option
            v-for="(v, i) in data.options.airport"
            :key="i"
            :label="v"
            :value="v"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="flightTimes"
          placeholder="起飞时间"
          @change="runFilters"
        >
          <el-option
            v-for="(v, i) in data.options.flightTimes"
            :key="i"
            :label="v.from + ':00' + '-' + v.to + ':00'"
            :value="v.from + ',' + v.to"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="company"
          placeholder="航空公司"
          @change="runFilters"
        >
          <el-option
            v-for="(v, i) in data.options.company"
            :key="i"
            :value="v"
            :label="v"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airSize"
          placeholder="机型"
          @change="runFilters"
        >
          <el-option
            v-for="(v, i) in sizeData"
            :key="i"
            :label="v.label"
            :value="v.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button
        type="primary"
        round
        plain
        size="mini"
        @click="handleFiltersCancel"
      >
        撤销
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.data);
  },
  props: ["data"],
  data() {
    return {
      airport: "", // 起飞机场
      flightTimes: "", // 起飞时间
      company: "", // 航空公司
      airSize: "", //机型
      sizeData: [
        // 自己定义数据 渲染到机型
        {
          label: "大",
          value: "L",
        },
        {
          label: "中",
          value: "M",
        },
        {
          label: "小",
          value: "S",
        },
      ],
    };
  },
  methods: {
    runFilters() {
      // 先将原来的数据放到一个数组备用
      let flights = [...this.data.flights];
      // 选择机场
      if (this.airport) {
        flights = this.handleAirport(flights);
      }
      // 选择出发时间
      if (this.flightTimes) {
        flights = this.handleFlightTimes(flights);
      }
      // 选择航空公司时候触发
      if (this.company) {
        flights = this.handleCompany(flights);
      }
      // 选择机型时候触发
      if (this.airSize) {
        flights = this.handleAirSize(flights);
      }
      // 实现子传父 把刷选出来的数据出传递给父组件
      this.$emit("setDataList", flights);
    },
    // 选择机场时候触发
    handleAirport(flights) {
      // 使用filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
      const list = flights.filter((v) => {
        return v.org_airport_name === this.airport;
      });
      return list;
    },

    // 选择出发时间时候触发
    handleFlightTimes(flights) {
      const form = Number(this.flightTimes.split(",")[0]);
      const to = Number(this.flightTimes.split(",")[1]);
      const list = flights.filter((v) => {
        let depTime = v.dep_time.split(":")[0];
        return depTime >= form && depTime < to;
      });
      return list;
    },

    // 选择航空公司时候触发
    handleCompany(flights) {
      // 需要return 回去才可以
      const list = flights.filter((v) => {
        return v.airline_name === this.company;
      });
      return list;
    },

    // 选择机型时候触发
    handleAirSize(flights) {
      const list = flights.filter((v) => {
        return v.plane_size === this.airSize;
      });
      return list;
    },

    // 撤销条件时候触发
    handleFiltersCancel() {
      this.airport = "";
      this.flightTimes = "";
      this.company = "";
      this.airSize = "";
      this.$emit("setDataList", this.data.flights);
    },
  },
};
</script>

<style lang="less" scoped>
</style>